import React from "react";
const Express = () => {
    let navigate = React.router.useNavigate();
    let [searchParams] = React.router.useSearchParams();
    const [leaseid, setLeaseid] = React.useState(
        searchParams.get("leaseid") ?? 0
    );
    const [expresslist, setExpresslist] = React.useState([]);
    const [businessinfo, setBusinessinfo] = React.useState({});
    React.useEffect(() => {
        getExpress();
    }, []);
    const getExpress = async () => {
        let result = await React.$api.getExpress({
            leaseid: leaseid,
        });
        if (result.code == 1) {
            setExpresslist(result.data.express.data);
            setBusinessinfo(result.data.business);
        }
    };
    return (
        <>
            <React.$vant.NavBar
                title="物流详情"
                leftText=""
                onClickLeft={() => navigate(-1)}
            />
            <div style={{ display: 'flex', height: '80px', alignItems: 'center' }}>
                <div style={{ width: '70px', height: '50px', display: 'flex', justifyContent: 'center' }}>
                    < img src={businessinfo.avatar_text} style={{ width: '50px', height: '50px', borderRadius: '50%' }} />
                </div>
                <div style={{ display: 'flex', height: '50px', flexDirection: 'column', justifyContent: 'space-between' }}>
                    <div style={{ display: 'flex' }}>
                        <p style={{ margin: '0 10px', fontWeight: 'bold' }}>{businessinfo.nickname}</p >
                        <p>{businessinfo.mobile}</p >
                    </div>
                    <div style={{ margin: '0 10px' }}>
                        {businessinfo.region_text}
                    </div>
                </div>
            </div>
            <React.$vant.Typography.Text>
                {expresslist.map((item) => (
                    <>
                        <React.$vant.Steps direction="vertical" active={0}>
                            <React.$vant.Steps.Item>
                                <h3>{item.status}</h3>
                                <p>{item.time}</p>
                            </React.$vant.Steps.Item>
                        </React.$vant.Steps>
                    </>
                ))}
            </React.$vant.Typography.Text>
        </>
    );
};
export default Express;
